<template>
  <div>
    <title-bar class="header">
      <span slot="left">我的</span>
    </title-bar>

    <div style="background:#eee">
      <has-login-header v-if="hasLogin" />
      <not-login-header v-else />

      <quick-entry />
      <order-entry class="order-entry" />

      <div
        class="line-entry flex-h flex-hsb flex-vc xb_border_bottom eee"
        @click="tel"
      >
        <span>客服</span>
        <span>400-826-8888</span>
      </div>

      <div
        class="line-entry flex-h flex-hsb flex-vc xb_border_bottom eee"
        @click="jumpToSettings"
      >
        <span>设置</span>
        <i class="icon iconfont icon-rightangel"></i>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from '@/components/titlebar/TitleBar'
import HasLoginHeader from './components/HasLoginHeader'
import NotLoginHeader from './components/NotLoginHeader'
import QuickEntry from './components/QuickEntry'
import OrderEntry from './components/OrderEntry'
import { open } from '@/utils/JumpUtils.js'
import { getUserInfo } from 'vue-xiaobu-utils'
export default {
  name: 'App',
  components: {
    'title-bar': TitleBar,
    'has-login-header': HasLoginHeader,
    'not-login-header': NotLoginHeader,
    'quick-entry': QuickEntry,
    'order-entry': OrderEntry
  },
  data() {
    return {
      hasLogin: false
    }
  },
  methods: {
    jumpToSettings: function () {
      open('city-app/settings.html')
    },
    refreshUserInfo: function () {
      console.log(getUserInfo())
      this.hasLogin = getUserInfo().IS_LOGIN === '1'
    },
    tel: function () {
      window.location.assign('tel:400-826-8888')
    }
  },
  mounted() {
    this.refreshUserInfo()
    window.onResume = () => {
      this.refreshUserInfo()
    }
  }
}
</script>

<style>
html,
body {
  background: #eee;
}
.order-entry {
  margin: 20px 0px;
}

.header > span {
  color: #333;
  margin: 0px 30px;
  font-size: 17px; /*no*/
  line-height: 100px;
  width: 200px;
  height: 100%;
}

.line-entry {
  width: 750px;
  height: 120px;
  background: #fff;
}
.line-entry > span:first-of-type {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  margin-left: 30px;
}

.line-entry > span:nth-of-type(2) {
  color: #999;
  font-size: 13px; /*no*/
  line-height: 19px; /*no*/
  margin-right: 30px;
}
.line-entry > i:nth-of-type(1) {
  margin-right: 30px;
}
</style>
